<template>
  <div>
    <div class="often-goods">
      <div class="title">常用商品</div>
      <div class="often-goods-list">
        <ul>
          <li v-for="(item, index) in oftenGoods" :key="index" @click="addOrderList(item)">
            <span>{{ item.goodsName }}</span>
            <span class="o-price">{{ item.price }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 清除浮动 -->
    <div class="clear-float"></div>
    <div class="goods-type">
      <el-tabs v-model="activeName">
        <el-tab-pane label="汉堡" name="first">
          <TypeGoods :typeGoods="type0Goods" />
        </el-tab-pane>
        <el-tab-pane label="小食" name="second">
          <TypeGoods :typeGoods="type1Goods" />
        </el-tab-pane>
        <el-tab-pane label="饮料" name="third">
          <TypeGoods :typeGoods="type2Goods" />
        </el-tab-pane>
        <el-tab-pane label="套餐" name="fourth">
          <TypeGoods :typeGoods="type3Goods" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import axios from 'axios';
  import { mapMutations } from 'vuex';
  import TypeGoods from './TypeGoods';
  //引入状态管理器
  import store from '../../vuex/store';

  export default {
    name: 'Goods',
    data() {
      return {
        activeName: 'first',
        oftenGoods: [],
        type0Goods: [],
        type1Goods: [],
        type2Goods: [],
        type3Goods: [],
      }
    },
    components: {
      TypeGoods,
    },
    methods: {
      ...mapMutations(['addOrderList']),
    },
    created() {
      // 获取常用商品
      axios.get('http://jspang.com/DemoApi/oftenGoods.php').then(res => {
        this.oftenGoods = res.data || [];
      }).catch(err => {
        console.log(err);
      });
      // 获取分类的商品
      axios.get('http://jspang.com/DemoApi/typeGoods.php').then(res => {
        this.type0Goods = res.data[0] || [];
        this.type1Goods = res.data[1] || [];
        this.type2Goods = res.data[2] || [];
        this.type3Goods = res.data[3] || [];
      }).catch(err => {
        console.log(err);
      })
    },
    store,
  }
</script>
<style scoped>
  .title {
    height: 20px;
    border-bottom: 1px solid #D3DCE6;
    background-color: #F9FAFC;
    padding:10px;
  }
  .often-goods-list ul li{
    list-style: none;
    float:left;
    border:1px solid #E5E9F2;
    padding:10px;
    margin:5px;
    background-color:#fff;
  }
  .o-price{
    color:#58B7FF; 
  }
  .clear-float {
    clear: both;
  }
  
</style>
